@import "common.scss";
$color:#1b2a65;
%title{
    width: 1200px;
    text-align: center;
    margin-bottom: 60px;
    p{
        margin: 20px;
    }
    p:first-child{
        color: #999999;
        font-size: 25px;
    }
    p:last-of-type{
        font-size: 35px;
    }
    button{
        width: 150px;
        height: 47px;
        border: none;
        background-color: $color;
        color: white;
    }
    
}

.wrap{
    main{
        display: flex;
        flex-direction: column;
        align-items: center;
       
        .top{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            
            .top_nav{
                width: 100%;
                display: flex;
                justify-content: center;
                border-bottom: 2px solid #dfe1e9;
                height:50px ;
                display: flex;
                justify-content: center;
                ul{
                    width: 1200px;
                    display: flex;
                    justify-content: space-evenly;
                    align-items: center;
                    li{
                        width: 175px;
                        height:52px ;
                        text-align: center;
                        line-height: 52px;
                        border-bottom: 2px solid transparent;
                        
                          &:hover{
                            border-bottom: 2px solid $color;
                             a{color: $color}
                        }
                        a{
                            display: block;
                            color: black;
                            
                        }
                    }
                }
            
          }

            .top_title{
                @extend %title
            }
            
            .top_content{
                width: 1200px;
                p{
                    font-size: 14px;
                    line-height: 22px;
                    color: #666666;
                    text-indent: 2em;
                }
            }
        }
        .mid{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            
            .mid_title{
                @extend %title;
            }
            .mid_con{
                box-sizing: border-box;
                padding: 40px;
                width: 1200px;
                border: 1px solid #989fba;
                border-radius: 10px;
                .mid_con_top{
                    display: flex;
                    justify-content: space-between;
                    margin-bottom:40px ;
                    .left{
                        width: 514px;
	                    height: 251px;
                        align-self: center;
                        p{
                        font-size: 14px;
                        line-height: 22px;
                        color: #666666;
                        text-indent: 2em;
                        }
                    }
                    .right{
                        img{
                            width: 514px;
	                        height: 353px;
                        }
                    }
                }
                .mid_con_bottom{
                    display: flex;
                    justify-content: space-between;
                    
                    .left{
                        img{
                            width: 515px;
	                        height: 353px;
                        }
                    }
                    .right{
                        width: 514px;
                        height: 251px;
                        align-self: center;
                        p{
                        font-size: 14px;
                        line-height: 22px;
                        color: #666666;
                        text-indent: 2em;
                        }
                    }
                }
            }
        }
        .bottom{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            .bottom_title{
                @extend %title;
            }
            .bottom_con{
                width: 1200px;
                display: flex;
                justify-content: space-between;
                margin-bottom: 35px;
                .conBox{
                    height: 586px;
                    border: 1px solid white;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                    &:hover{
                        border: 1px solid #adb2c7;
                    }
                    img{
                        width: 377px;
	                    height: 364px;
                        margin-bottom: 30px;
                    }
                    p{
                        width: 335px;
                        line-height: 20px;
                        &:first-of-type{
                            font-size: 24px;
                            font-weight: bolder;
                            margin-bottom:20px ;
                        }
                        &:last-of-type{
                            font-size: 14px;
                        }
                    }

                }
            }
            
        }
    }
}